<template>
  <div class="home">

    <el-button type="danger" @click="banner.isShow=true" round> 新增菜单按钮</el-button>
    <!--         -->
    <DialogBanner @myevent="getBannerFromChild" :banner="banner" :bannerInfo="bannerInfo"></DialogBanner>
    <template>
      <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="id" label="序号" sortable width="180">
        </el-table-column>
        <el-table-column prop="second_cateid" label="二级名字" sortable width="180">
        </el-table-column>
        <el-table-column prop="title" label="轮播图名字">
        </el-table-column>

        <el-table-column prop="pic" label="图片">
          <template v-slot="item">
            <img :src="'http://localhost:3000'+item.row.img" style="width: 100px;height:100px">
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="prop">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>

            <el-button type="warning" icon="el-icon-circle-plus" circle @click="editBtn(prop.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteBtn(prop.row.id)"></el-button>

          </template>
        </el-table-column>





        <!--
               <template v-for="itemChild in item.children">
                 <el-menu-item  :index="itemChild.path" :key="itemChild.path" @click="changeurl(itemChild.path,itemChild.name)">
                   <img :src="childrenIndex == itemChild.name ? itemChild.active : itemChild.icon" alt="">
                   <span slot="title">{{itemChild.name}}</span>
                 </el-menu-item>
               </template>  -->


      </el-table>
    </template>


  </div>
</template>

<script>
  import DialogBanner from "../components/DialogBanner"
  import {
    mapState,
    mapGetters
  } from "vuex"
  import {
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      ...mapState({
        tableData: state => state.banner.tableData
      })
    },
    created() {
      // this.$store.dispatch('getTableActions')

      this.getTableActions()
    },
    data() {
      return {

        banner: {

          isShow: false
        },
        bannerInfo: {
          id:"",
          title: "",
          img: "",
          status: 1
        }
        /* tableData: [{
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
           date: '2016-05-04',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1517 弄'
         }, {
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1519 弄'
         }, {
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1516 弄'
         }]*/
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      getBannerFromChild(bannerInfoFd) {
        // this.tableData.push(ruleForm)                  //错误写法
        this.postTableActions(bannerInfoFd)
      },
      deleteBtn(sid) {                  
     /*    this.tableData.forEach(item => {                      //错误写法
          if (item.id == sid)
            this.tableData.remove(item)
        }) */

        
		  // 确认？
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteTableActions(sid)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },


    
      editBtn(form) {
        this.banner.isShow = true
      this.bannerInfo = form
      console.log(form,"################")
      },


      ...mapActions('banner', ['getTableActions','postTableActions','deleteTableActions' ])


    },
    components: {
      DialogBanner
    }


  }
</script>

<style scoped>
  .el-table {
    background-color: #fff;

  }

  .home {
    text-align: left;
  }
</style>